<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
      <div class="top">
        <p>说明：目前只支持学科和关键字条件筛选</p>
        <el-button
                style="float: right"
                type="success"
               @click="$router.push('new')"
              >
                <svg-icon icon-class="edit"></svg-icon> 新增试题</el-button
              >
      </div>
      <el-form :model="queryObj" ref="queryObj" label-width="100px">
        <div class="filter-content">
          <el-row :gutter="20">
            <el-col :span="6">
            <el-form-item label="学科">
                <el-select
                  style="width: 220px"
                  v-model="queryObj.subjectID"
                  @change="chooseSubjectID"
                >
                 <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录" >
                <el-select
                  style="width: 220px"
                  v-model="queryObj.catalogID"
                >
                  <el-option
                    v-for="item in directorysList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="area">
                <el-select
                  class="filter-item"
                  style="width: 220px"
                  v-model="queryObj.tags"
                >
                 <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" >
                <el-input
                placeholder="根据题干搜索"
                  v-model="queryObj.keyword"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型" >
                <el-select
                  style="width: 220px"
                  v-model="queryObj.questionType"
                >
                  <el-option
                    v-for="item in questionTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="难度" >
                <el-select
                  style="width: 220px"
                  v-model="queryObj.difficulty"
                >
                 <el-option
                    v-for="item in difficultyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="方向" >
                <el-select
                  style="width: 220px"
                  v-model="queryObj.direction"
                >
                <el-option
                    v-for="item in directionList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="录入人" class="people">
                <el-select
                  style="width: 220px"
                  v-model="queryObj.creatorID"
                >
                  <el-option
                    v-for="(item,index) in userList"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="6">
              <el-form-item label="题目备注" prop="state">
                <el-input
                  v-model="queryObj.remarks"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="企业简称" prop="state">
                 <el-input
                  v-model="queryObj.shortName"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="城市" >
                  <el-select
                  style="width: 110px"
                  filterable
                  v-model="queryObj.province"
                  @change="chooseCity"
                >
                  <el-option
                    v-for="item in citySelect.cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                  <el-select

                  style="width: 110px; margin-left:10px"
                  filterable
                  v-model="queryObj.city"
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
              <el-col :span="6">
              <el-form-item  class="btn">
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="searchName">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <!-- 搜索部分 end -->
      <!-- 消息记录 -->
      <el-alert
        :title="`共 ${total} 条记录`"
        effect="dark"
        :closable="false"
        show-icon
        type="info"
      >
      </el-alert>
      <!-- 表格部分 -->
        <el-table
        :data="tableData"
        v-loading="loading"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="试题编号" prop="id">
        </el-table-column>
        <el-table-column align="center" label="学科" prop="subject">
        </el-table-column>
        <el-table-column align="center" label="目录" prop="catalog">
        </el-table-column>
        <el-table-column label="题型" prop="question">
           <template  #default="{ row }">
           <span v-if="row.questionType ==='1'">单选</span>
           <span v-else-if="row.questionType ==='2'">多选</span>
           <span v-else-if="row.questionType ==='3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题干" prop="question" >
          <template  #default="{ row }" >
         <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间" prop="addDate" width="150">
        </el-table-column>
        <el-table-column align="center" label="难度" prop="remarks">
            <template  #default="{ row }">
           <span v-if="row.difficulty ==='1'">简单</span>
           <span v-else-if="row.difficulty ==='2'">一般</span>
           <span v-else-if="row.difficulty ==='3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入人" prop="creator">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="280"
          class-name="small-padding fixed-width"
        >
          <template #default="{ row }">
             <el-button
              type="primary"
              icon="el-icon-view"
              circle
              plain
              @click="open(row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              @click="$router.push(`new?id=${row.id}`)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(row.id)"
            ></el-button>
              <el-button
              @click="addGood(row.id)"
                type="warning"
                icon="el-icon-check"
                circle
                plain
              ></el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <PageTool
          :total="total"
          :paginationPage="queryObj.page"
          :paginationPagesize="queryObj.pagesize"
          @pageChange="onPageChange"
          @pageSizeChange="onPageSizeChange"
        ></PageTool>
      </div>
      <QuestionsPreview
      ref="preview"
      :dialogShowLook.sync="dialogShowLook"
      >
      </QuestionsPreview>
    </el-card>

  </div>
</template>

<script>
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as simpleSubject } from '@/api/hmmm/subjects.js'
import { getNewDate } from '@/utils/index.js'
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple as simpleUser } from '@/api/base/users.js'

export default {
  components: {
    PageTool,
    QuestionsPreview
  },
  data () {
    return {
      type: '',
      dialogShowLook: false,
      loading: true,
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      titleInfo: {
        text: '',
        pageTitle: '用户'
      },
      citySelect: {
        cityList: [],
        cityDate: []
      },
      status: [
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' }
      ],
      formBase: {
        shortName: '',
        isFamous: false,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        id: 0,
        number: ''
      },
      subjectList: [],
      directorysList: [],
      tagsList: [],
      questionTypeList: [],
      difficultyList: [],
      directionList: [],
      userList: []
    }
  },

  async created () {
    this.getSubjectList()
    this.getUser()
    this.citySelect.cityList = provinces()
    this.questionTypeList = [...questionType]
    this.difficultyList = [...difficulty]
    this.directionList = [...direction]
    this.initData()
  },

  methods: {
    async initData () {
      const { data } = await list(this.queryObj)
      this.total = data.counts
      this.tableData = data.items
      this.tableData.forEach(item => {
        item.addDate = getNewDate(item.addDate)
      })
      this.loading = false
    },
    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },

    async getSubjectList () {
      const res = await simpleSubject()
      this.subjectList = [...res.data]
    },
    async getUser () {
      const res = await simpleUser()
      res.data.forEach(item => {
        this.userList.push(item.username)
      })
    },
    async addGood (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        const obj = { id, choiceState: 1 }
        await choiceAdd(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '精选成功!'
        })
      }).catch(() => {

      })
      this.initData()
    },
    // 搜索
    searchName () {
      this.initData()
    },
    // 清除
    clear () {
      // this.$refs.queryObj.resetFields()
      this.queryObj.subjectID = null
      this.queryObj.difficulty = ''
      this.queryObj.questionType = ''
      this.queryObj.tags = ''
      this.queryObj.province = ''
      this.queryObj.city = ''
      this.queryObj.keyword = null
      this.queryObj.remarks = ''
      this.queryObj.shortName = ''
      this.queryObj.direction = ''
      this.queryObj.creatorID = ''
      this.queryObj.catalogID = ''

      this.initData()
    },
    // 打开弹窗
    async open (id) {
      this.dialogShowLook = true
      this.$refs.preview.hanldeEditForm(id)
    },
    // 选择城市
    chooseCity (e) {
      this.citySelect.cityDate = citys(e)
    },
    // 选择学科
    async chooseSubjectID () {
      const res = await simpleDirectorys()
      this.directorysList = [...res.data]
      const res1 = await simpleTags()
      this.tagsList = res1.data
    },
    async del (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  computed: {
    text () {
      if (this.type === 'add') return '创建'
      if (this.type === 'edit') return '编辑'
      else return 'add'
    }
  }
}
</script>

<style scoped lang="less">
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  p{
    font-size: 12px;
    color: #FFC0CB;
  }
}
.btn{
  padding-left:85px ;
}
/deep/.people{
  padding-left:15px ;
}
/deep/.el-card__body{
  padding-top: 0px;
}
/deep/ .el-button--medium.is-circle {
  margin-right: 5px;
}
/deep/ .el-alert--info.is-dark {
  background-color: #f4f4f5;
  color: #909399;
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card {
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  .pagination {
    margin-top: 10px;
    float: right;
  }
}
.header {
  margin-bottom: 10px;
  .search {
    width: 200px;
    margin-right: 10px;
  }
}
</style>
